<template>
  <div class="back-to-top" @click="backToTop()" v-show="isShowTop">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.484 28.284">
      <g transform="translate(-229 -126.358)">
        <rect fill="currentColor" width="35" height="5" rx="2" transform="translate(229 151.107) rotate(-45)"></rect>
        <rect fill="currentColor" width="35" height="5" rx="2" transform="translate(274.949 154.642) rotate(-135)"></rect>
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue"

let scrollTopValue: number = 0;

let isShowTop = ref(false);

onMounted((): void => {
  window.addEventListener("scroll", _scrollTopFn);
})

onBeforeUnmount((): void => {
  window.removeEventListener("scroll", _scrollTopFn);
})

const _scrollTopFn = (): void => {
  scrollTopValue = document.documentElement.scrollTop || document.body.scrollTop;

  if (scrollTopValue > 200) {
    isShowTop.value = true;
  } else {
    isShowTop.value = false;
  }
}

const backToTop = (): void => {
  window.scroll({ left: 0, top: 0, behavior: "smooth" });
}
</script>

<style>
.back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  position: fixed;
  padding: 18px 10px;
  width: 32px;
  height: 20px;
  box-sizing: content-box;
  right: 40px;
  bottom: 20px;
  color: var(--vp-c-brand);
}

.back-to-top:hover {
  cursor: pointer;
  color: var(--vp-c-brand-light);
}

@media (max-width: 768px) {
  .back-to-top {
    z-index: 99;
    position: fixed;
    padding: 6px;
    width: 24px;
    height: 24px;
    right: 24px;
    bottom: 24px;
    background: #f5f5f5;
    border-radius: 50%;
    will-change: auto;
  }

  .back-to-top:active {
    opacity: 0.85;
  }
}
</style>